import React, { PureComponent } from 'react'
import { View, ScrollView, Text } from '@tarojs/components'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { getThemeStyle, timestampToTime } from '@/utils'
import { ORDER_LIST_CANCEL_REASON } from '@/consts'
import { withPager, withBackToTop } from '@/hocs'
import { SpLoading, SpNote, SpTab, SpToast, SpNavBar, CouponItem } from '@/components'
import { classNames } from '@/utils'
import api from '@/api'
import './index.scss'
import { PullToRefresh, InfiniteScroll } from 'antd-mobile'

const TAB_LIST = [
    { value: '1', label: '领取记录' },
    { value: '2', label: '使用记录' },
]
@withPager
@withBackToTop


export default class List extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            activeIndex: 1,
            actionType: '',
            orderList: [],
            loading: false,
        }
    }


    searchFilter = async ({ isCMD, isResetList, isFirst }) => {
        let query = {}
        if (isFirst) {
            return
        }
        if (isCMD) {
            //如果是初始化
            query.orderList = []
        }

        if (isResetList) {
            //筛选时需要置空
            query.orderList = []
        }
        // this.state.Bscroll.scrollTo(0,0,300)
        this.resetPage(() => {
            this.setState(
                {
                    ...this.state,
                    ...query
                },
                () => {
                    this.nextPage()
                }
            )
        })

    }



    //获取订单列表
    getOrdersList = async (params) => {

        const {
            router: {
                params: { card_id }
            }
        } = getCurrentInstance()
        let isuse = {}
        console.log(this.state.activeIndex)
        if (this.state.activeIndex == 2) {
            isuse['is_use'] = 'true'
        }
        const {
            list,
            total_count,
            count,
        } = await api.coupon.getDetailList({
            page: params.page_no,
            pageSize: params.page_size,
            card_id,
            ...isuse,
        })

        this.setState({
            orderList: params.page_no > 1 ? [...this.state.orderList, ...list] : list
        })
        return {
            total: this.state.activeIndex == 2 ? total_count : count,
        }
    }

    //请求
    fetch = async (params) => {
        this.setState({
            loading: true
        })
        console.log('-----fetch-----', params)
        const { total } = await this.getOrdersList(params)

        this.setState({
            loading: false
        })

        return { total }
    }


    handleRefresh = () => {
        this.searchFilter({ isResetList: true })
    }


    //点击tab
    handleChangeTab = async (active) => {
        console.log('点击了tab', TAB_LIST[active].value)
        this.setState({ activeIndex: TAB_LIST[active].value }, async() => {
            await this.searchFilter({ isResetList: true })
        })

    }

    // 点击操作按钮
    handleAction = async (info, { type, label }) => {

    }
    async componentWillUnmount() {
        console.log('2222')

    }
    componentDidMount() {

    }

    async componentDidShow() {
        console.log('dianwu h5 comonentDidShow...')


    }

    onPullDownRefresh = async () => {
        // Tracker.dispatch('PAGE_PULL_DOWN_REFRESH')
        await this.searchFilter({ isResetList: false })

    }

    render() {
        const {
            orderList,
            page,
            buttonsActionVisible
        } = this.state
        const statusRecord = {
            pulling: '用力拉',
            canRelease: '松开吧',
            refreshing: '玩命加载中...',
            complete: '好啦',
        }
        return (
            <View>
                <SpNavBar title='优惠券详情' />
                <View className='page-order-list' style={getThemeStyle()}>
                    <View className='header'>
                        <SpTab dataSource={TAB_LIST} onChange={this.handleChangeTab} />
                    </View>

                    <PullToRefresh
                        onRefresh={this.onPullDownRefresh}
                        renderText={status => {
                            return <div>{statusRecord[status]}</div>
                        }}
                    >
                        <ScrollView
                            scrollY
                            className={classNames('wrapper', 'page-order-list-orderList', {
                                ['show-buttonsaction']: buttonsActionVisible
                            })}
                            scrollWithAnimation
                        >
                            <View className='content' >

                                {this.state.activeIndex == 1 ? (orderList.map((item, index) => {
                                    return (
                                        <View className='content-flex' key={item.id}>
                                            <View className='content-left'>
                                                <View className='text'>姓名：{item.username}</View>
                                                <View className='text'>电话:{item.mobile}</View>
                                            </View>
                                            <View className='content-rigth'>
                                                <View className='text'>领取时间:{timestampToTime(item.get_date)}</View>
                                                <View className='text'>来源类型:{item.source_type}</View>
                                            </View>

                                        </View>
                                    )
                                })) : (orderList.map((item, index) => {
                                    return (
                                        <View className='content-flex' key={item.id}>
                                            <View className='content-left'>
                                                <View className='text'>优惠券码{item.code}</View>
                                                <View className='text'>用户名字:{item.username}</View>
                                                <View className='text'>手机号:{item.mobile}</View>
                                            </View>
                                            <View className='content-rigth'>
                                                <View className='text'>操作途径:{item.used_status}</View>
                                                <View className='text'>记录时间:{item.used_time}</View>
                                                <View className='text'>核销门店:{item.shop_name}</View>
                                            </View>

                                        </View>
                                    )
                                }))}
                                <InfiniteScroll loadMore={this.nextPage} hasMore={page.hasNext} />
                                {/* {loading && <SpLoading>正在加载...</SpLoading>} */}

                                {!page.isLoading && !page.hasNext && !orderList.length && (
                                    <SpNote img='no_order.png'>暂时还没有优惠券信息</SpNote>
                                )}

                                {/* {!page.hasNext && !!orderList.length && <SpTips msg={'没有更多了哦~'}></SpTips>} */}
                            </View>
                        </ScrollView>
                    </PullToRefresh>
                </View>
            </View>

        )
    }
}
